<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页test</title>
	<style>
	* {
		margin:0;
		padding: 0;
		list-style: none;
	}

	#root {
		margin: 30px;
		width: 1200px;
		min-height: 1000px;
	}

	#head {
		width: 100%;
		height: 100px;
		padding: 15px;
	}

	#mid {
		width: 100%;
		height: 400px;
		position: relative;
	}

	#m_left {
		width: 30%;
		height: 380px;
		position: absolute;
		
	}

	#m_right {
		width: 70%;
		height: 400px;
		position: absolute;
		right: 0;
	}

	#foot {
		width: 100%;
		min-height: 600px;
		position: relative;
	}

	#f_head {
		width: 100%;
		height: 80px;
		position: absolute;
		border-bottom: 1px solid #66666687;
	}

	#f_mid {
		width: 100%;
		height: 410px;
		position: absolute;
		top: 100px;
	}
	#f_mid2{
		width: 100%;
		height: 450px;
		position: absolute;
		top: 580px;
	}
	#f_foot{
		width: 100%;
		min-height: 600px;
		position: absolute;
		top:1050px;

	}
	#wrap {
		height: 400px;
		width: 800px;
		position: relative;
	}

	#pic li {
		position: absolute;
		display: none;
	}

	#pic li img {
		position: absolute;
		height: 380px;
		width: 800px;
	}

	#num {
		position: absolute;
		color: red;
		bottom: 10px;
		left: 40%;
	}

	#num li {
		float: left;
		width: 20px;
		height: 20px;
		background: #666;
		border-radius: 50%;
		text-align: center;
		line-height: 20px;
		color: #fff;
		margin: 3px;
		cursor: pointer; /* 将光标设置为手型 */
	}

	#num li.active {
		background-color: yellowgreen;
	}

	#right {
		right: 0;
	}

	.arrow {
		position: absolute;
		color: #fff;
		width: 30px;
		height: 40px;
		display: none;
		background: rgba(0, 0, 0, 0.5);
		text-align: center;
		line-height: 40px;
		top: 45%;
	}

	#wrap:hover .arrow {
		display: block;
	}

	#nav {
		width: 100%;
		height: 30px;
	}

	#nav li > a {
		text-decoration: none;
	}
	#nav li:hover{
		background: #cfc;
	}
	#nav .top_nav {
		list-style: none;
		float: left;
		width: 100px;
		text-align: center;

	}

	#nav .reg_login {
		list-style: none;
		float: right;
		width: 150px;
		text-align: center;
	}

	#head h2 {
		font-family: 华文楷体;
		font-size: 30px;
		display: inline;
	}

	#head span {
		font-family: 华文隶书;
		font-size: 20px;
	}

	#m_left li {
		width: 300px;
		height: 30px;
		border: 1px solid #ccccff;
		margin: 10px;
		border-radius: 5px;
		list-style: none;
	}

  #m_left li:hover {
     background: #ccccff;
  }

  #m_left li a:hover  {
     color: #333;
  } 

  #m_left li a {
     text-decoration: none;
     line-height: 30px;
     color: #666;
     margin-left: 10px;
  }

  .yincang {
     display: none;
  }

  .child_content li {
     list-style: none;
     width: 100px;
     float: left;
     /*  border: 1px solid #000;*/
  }

  .child_content li a {
     text-decoration: none;
     position: absolute;
     z-index: 999;
     font-size: 20px;
     color: #000000;
  }

  .child_content li a:hover {
     color: orangered;
  }

  #shou_font a {
     color: mediumvioletred;

  }

  .top_nav a {
     font-size: 20px;
  }

  .sub {
     position: absolute;
     height: 358px;
     width: 390px;
     background: #ffffff9c;
     z-index: 4;
     top: 0;
     box-shadow: 3px 2px 5px rgba(0, 0, 0, .2);
     display: block;
     padding: 22px 50px 0;
     color: #000;
  }

  .sub li a {
     float: left;
     width: 100px;
     height: 80px;
     text-align: center;
     line-height: 80px;
     overflow: hidden;
     position: relative;
     text-decoration: none;
     text-overflow: ellipsis;
     white-space: nowrap;
     position: relative;
     margin: 0 0 10px 0;
  }

  #f_nav li {
     text-align: center;
     line-height: 100px;
  }
  #f_nav li a{
     text-decoration: none;
     color:black;
  }
  #f_nav li a:hover {
     color: #ff6767;

  }

  .f_nav_left {
     float: left;
     width: 160px;
     font-size: 20px;
     font-weight: 400;
  }

  .f_nav_rigth {
     float: right;
     width: 70px;
  }

#mid2_food-box li{
     width: 150px;
     height:160px;
     float: left;
     padding: 10px;
     text-align: center;
  }

/* #mid2_food-box li{
   float: left;
   text-align: center;
   width: 180px;
   overflow: hidden;
} */

  #mid2_food-box span{
     text-decoration: none;
  }
  /* #mid2_food-box img{
    width: 200px;
    height: 200px;
  
   } */

#food-box img{
   width: 200px;
    height: 200px;
    padding:10px;
}

#f_mid2 li a{
     text-decoration: none;
     color:black;
     font-size: 20px
}
#f_mid2_title{
    height: 30px;
    border-bottom: 1px solid #66666687;
}

#top_bar{
	height: 40px;
	background: #333;
	color: #999;
	top: 0;
	position: fixed;
	z-index: 10000;
	width: 100%;
	left: 0;
	min-width: 990px;
}
#top_bar li a{
	font-size: 14px;
	color: #ccc;
	height: 40px;
	line-height: 40px;
	padding: 0 20px;
	text-decoration: none;
	display: inline-block;

}
#top_bar li a:hover{
	background: orange;
}
.top_bar_left a{
	float: left;
}
.top_bar_right a{
	float: right;
}

#f_foot_title{
   height: 35px;
   border-bottom: 1px solid #66666687;
}
.f_foot_title_left a{
   float: left;
   text-decoration: none;
   font-size: 20px;
   width: 100px;
   color: black;
   line-height: 35px;
   text-align: center;
}
.f_foot_title_left a:hover{
   background: pink;
}
#jingxuan li{
   float: left;
   /* margin: 0 23px 23px 0; */
   text-align: center;
   width: 230px;
   overflow: hidden;
}
#jingxuan img{
   width:200px;
   height:200px;
   padding: 10px;
}

#jingxuan span{
   color: black;
}
#navigation, #navigation li ul { 
   list-style-type:none; 
}
#jingxuan p{
   color:red;
}
#navigation li { 
   float:left; 
   text-align:center; 
   position:relative; 
}

  #navigation li a:link, #navigation li a:visited{
     z-index: 9999; 
     display:block; 
     text-decoration:none; 
     width:82px; 
     height:40px;  
     border:1px solid #fff; 
     border-width:1px 1px 0 0; 
     padding-left:10px; 
     font-size: 20px;

  }
  #navigation li a:hover { 
     color:#fff; 
     background:#ffb100; 
  }
  #navigation li ul li a:hover { 
     color:#fff; 
     background:#ffb100
  }
  #navigation li ul { 
     display:none; 
     position:absolute; 
     top:40px;
     margin-top:1px; 
     font-size:12px;
  } 
</style>
</head>
   <body>
      <div id="root">
        <div id="head">
         <h2>美食天下</h2>
         <span>我所有的朋友都是吃货</span>
         <ul id="nav">
          <li id="shou_font" class="top_nav"><a href="#">首页</a></li>
          <li class="top_nav"><a href="#">菜谱</a></li>
          <li class="top_nav"><a href="#">食材</a></li>
          <li class="top_nav"><a href="#">珍选</a></li>
          <li class="top_nav"><a href="#">健康</a></li>
          <li class="top_nav"><a href="#">专题</a></li>
          <li class="top_nav"><a href="#">社区</a></li>
          <li class="top_nav"><a href="#">话题</a></li>  				
          <li class="reg_login"><a href="#">登录</a></li>
          <li class="reg_login"><a href="#">注册</a></li><!--还要去掉下划线-->
       </ul>
       <div id="top_bar">
          <ul>
           <li class="top_bar_left"><a href="#">美食天下首页</a></li>
           <li class="top_bar_left"><a href="#">菜谱</a></li>
           <li class="top_bar_left"><a href="#">食材</a></li>
           <li class="top_bar_left"><a href="#">珍选</a></li>
           <li class="top_bar_left"><a href="#">健康</a></li>
           <li class="top_bar_left"><a href="#">专题</a></li>
           <li class="top_bar_left"><a href="#">社区</a></li>
           <li class="top_bar_left"><a href="#">话题</a></li>
           <li class="top_bar_right"><a href="#">注册</a></li>
           <li class="top_bar_right"><a href="#">登录</a></li>
        </ul>
     </div>

  </div><!--导航栏-->
  <div id="mid">
   <div id="m_left">
    <ul>
     <li><a href="javascript:show(0)">菜谱大全</a></li>
     <li><a href="javascript:show(1)">食材大全</a></li>
     <li><a href="javascript:show(2)">饮食健康</a></li>
     <li><a href="javascript:show(3)">专题专区</a></li>
  </ul>
</div>
<div id="m_right">
 <div class="child_content yincang">
  <ul class="sub">
   <li><a href="#">一周热门</a></li>
   <li><a href="#">人气菜肴</a></li>
   <li><a href="#">夏季食谱</a></li>
   <li><a href="#">酱泡腌菜</a></li>
   <li><a href="#">早餐</a></li>
   <li><a href="#">高颜值</a></li>
   <li><a href="http://localhost:3000/one/liangcai">凉菜</a></li>
   <li><a href="http://localhost:3000/one/recai">热菜</a></li>
   <li><a href="#">主食</a></li>
   <li><a href="#">小吃</a></li>
   <li><a href="#">新秀菜谱</a></li>
</ul>
</div>
<div class="child_content yincang">
  <ul class="sub">
   <li><a href="#">小龙虾</a></li>
   <li><a href="#">秋葵</a></li>
   <li><a href="#">西红柿</a></li>
   <li><a href="#">黑木耳</a></li>
   <li><a href="#">螃蟹</a></li>
   <li><a href="#">鸡翅</a></li>
   <li><a href="#">肉禽蛋</a></li>
   <li><a href="#">水产品</a></li>
   <li><a href="#">蔬菜瓜菌</a></li>
   <li><a href="#">鲜果干果</a></li>
   <li><a href="#">米面豆乳</a></li>
</ul>
</div>
<div class="child_content yincang">
  <ul class="sub">
   <li><a href="#">最新推荐</a></li>
   <li><a href="#">瘦身菜谱</a></li>
   <li><a href="#">饮食常识</a></li>
   <li><a href="#">气血双补</a></li>
   <li><a href="#">食疗食补</a></li>
   <li><a href="#">驱寒暖身</a></li>
   <li><a href="#">对抗雾霾</a></li>
   <li><a href="#">失眠</a></li>
</ul>
</div>
<div class="child_content yincang">
  <ul class="sub">
   <li><a href="#">菜谱</a></li>
   <li><a href="#">家常菜谱</a></li>
   <li><a href="#">食疗食补</a></li>
</ul>
</div>
<div id="wrap">
  <ul id="pic">
   <li style="display:block;"><img src="/images/2018051615264411972048197577.jpg" alt=""></li>
   <li><img src="/images/2018052115268718146958197577.jpg" alt=""></li>
   <li><img src="/images/2018051415262682145168197577.jpg" alt=""></li>
   <li><img src="/images/2018050915258386463188197577.jpg" alt=""></li>
   <li><img src="/images/2018050715256619061988197577.jpg" alt=""></li>
</ul>
<ul id="num">
   <li class="active">1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
</ul>
<a href="javascript:void(0);" class="arrow" id="left">&lt;</a>
<a href="javascript:void(0);" class="arrow" id="right">&gt;</a>
</div>
<script type="text/javascript">
function id(a) {
   return document.getElementById(a);
}

var g = {index: 0};
var pics = id('pic');
pics = pics.getElementsByTagName('li');
   					pics = Array.from(pics);//转换为数组

   					var nums = id('num');
   					nums = nums.getElementsByTagName('li');

   					function showCurrentImg(g) {
   						g.index++;
   						// alert(index);
   						pics.forEach(function (item, i) {
   							// debugger;
   							//console.log(g);
   							if (g.index % 5 === i) {//要操作的图片
   								item.style.display = "block";
   								nums[i].className = "active";
   							} else {//要隐藏的图片
   								item.style.display = "none";
   								nums[i].className = "";
   							}

   						});
   					}
   					function run() {
   						//console.log(g.index);
   						g.timmer = setInterval(showCurrentImg, 1000, g);
   					}

   					id("wrap").onmouseover = function (e) {
   						//鼠标放到图片上，就不会轮播了
   						clearInterval(g.timmer);
   					}

   					id("wrap").onmouseout = function (e) {
   						run();
   					}
   					id('right').onclick = function (e) {
   						showCurrentImg(g);
   					}
   					id('left').onclick = function (e) {
   						g.index += 3;
   						showCurrentImg(g);
   					}

   					Array.from(nums).forEach(function (item, i) {
   						item.onclick = function () {
   							g.index = i + 4;
   							showCurrentImg(g);
   						}
   					});
   					// run();
   					//showCurrentImg(4);
   					//i是4，item就代表第5张图片
                </script>
             </div>
          </div>
          <div id="foot">
            <div id="f_head">
             <div id="f_nav">
              <ul>
               <li class="f_nav_left"><a href="#">新秀菜谱</a></li>
               <li class="f_nav_rigth"><a href="http://localhost:3000/one/recai">热菜</a></li>
               <li class="f_nav_rigth"><a href="http://localhost:3000/one/liangcai">凉菜</a></li>
               <li class="f_nav_rigth"><a href="#">汤羹</a></li>
               <li class="f_nav_rigth"><a href="#">主食</a></li>
               <li class="f_nav_rigth"><a href="#">小吃</a></li>
               <li class="f_nav_rigth"><a href="#">西餐</a></li>
            </ul>
         </div>

      </div>
      <div id="f_mid">
         <ul id="food-box"><!-- 连接cai数据库 -->
          <%data[1].forEach(function(item){%>
            <img src="/images/<%=item.c_img%>">
          <%})%>

       </ul>
    </div>
    <div id="f_mid2">
      <ul id="f_mid2_title">
        <li><a href="#">时令蔬菜</a></li>
      </ul>

     <ul id="mid2_food-box">
      <%data[0].forEach(function(item){%><!-- 连接shicai数据库 -->
      <li>
         <img width="150" src="/images/<%=item.s_img%>" alt="">
         <span><%=item.s_name%></span>
      </li>
      
      <%})%>
   </ul>
</div>
<div id="f_foot">
   <ul id="f_foot_title">
      <li class="f_foot_title_left"><a href="http://localhost:3000/shangcheng">严选精选</a></li>
   </ul>
<ul id="jingxuan">
   <%data[2].forEach(function(item){%><!-- 连接shangpin数据库 -->
   <li>
      <a href="/one?sp_id=<%=item.sp_id%>"><img width="150" src="/images/<%=item.sp_img%>" alt=""></a>
      <input type="hidden"  name="sp_id" value="<%=item.sp_id%>"><br>
      <span><%=item.sp_name%></span>
      <p><%='￥'+item.sp_price%></p>
   </li>
      <%})%>
</ul>
</div>
</div>
</div>

<script>
var rr = document.getElementById('m_right');
function show(e) {
   for (var i = 0; i < 4; i++) {
    if (e == i) {
     rr.children[i].classList.remove('yincang');
  } else {
     rr.children[i].classList.add('yincang');
  }
}
}

function displaySubMenu(li) { 
   var subMenu = li.getElementsByTagName("ul")[0]; 
   subMenu.style.display = "block"; 
} 
function hideSubMenu(li) { 
   var subMenu = li.getElementsByTagName("ul")[0]; 
   subMenu.style.display = "none"; 
} 
</script>
</body>
</html>